<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>历史菜单</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body { font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #121212; color: #fff; margin: 0; padding: 0; }
      .history-section {
        max-width: 420px;
        margin: 2.5rem auto 0 auto;
        background: #181a20;
        border-radius: 1.2rem;
        box-shadow: 0 4px 24px #00f2ea22;
        padding: 1.5rem 1.2rem 1.2rem 1.2rem;
      }
      .history-title {
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 1.2rem;
        color: #00f2ea;
        letter-spacing: 1px;
        text-align: center;
      }
      .history-list {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
      }
      .history-card {
        background: linear-gradient(120deg, #23272f 60%, #23233b 100%);
        border-radius: 1.1rem;
        box-shadow: 0 2px 12px #00f2ea22;
        padding: 1rem 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        position: relative;
      }
      .history-date {
        color: #00f2ea;
        font-weight: bold;
        font-size: 1.08rem;
        margin-bottom: 0.2rem;
      }
      .history-summary {
        color: #b3e0f7;
        font-size: 0.98rem;
        margin-bottom: 0.2rem;
      }
      .history-remark {
        color: #ffd580;
        font-size: 0.97rem;
        margin-top: 0.1rem;
        word-break: break-all;
      }
      .back-btn {
        display: block;
        margin: 2rem auto 0 auto;
        background: linear-gradient(90deg, #fe2c55 0%, #00f2ea 100%);
        color: #fff;
        font-weight: bold;
        padding: 0.5rem 2.2rem;
        border-radius: 1.2rem;
        font-size: 1.1rem;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 8px #fe2c5533;
        transition: background 0.18s;
      }
      .back-btn:hover {
        background: linear-gradient(90deg, #00f2ea 0%, #fe2c55 100%);
      }
      .fixed-back-btn {
        position: fixed;
        right: 2.2rem;
        bottom: 2.2rem;
        z-index: 100;
        box-shadow: 0 4px 24px #00f2ea55;
        min-width: 110px;
      }
      @media (max-width: 520px) {
        .fixed-back-btn { right: 1rem; bottom: 1rem; }
      }
    </style>
  </head>
  <body>
    <div class="history-section">
      <div class="history-title">
        <i class="fa fa-history mr-2"></i>历史菜单
      </div>
      <div class="history-list" id="history-list"></div>
      <button class="back-btn fixed-back-btn" onclick="goBack()">
        <i class="fa fa-arrow-left mr-2"></i>返回
      </button>
    </div>
    <script>
      // mock历史菜单数据
      const historyMenus = [
        {date:'2025-04-28 晚餐', summary:'红烧肉x2、清炒时蔬x1、番茄炒蛋x1', remark:'今晚有小朋友，少放辣椒', id:1},
        {date:'2025-04-27 午餐', summary:'宫保鸡丁x1、鱼香茄子x1、紫菜蛋花汤x1', remark:'多做点素菜', id:2},
        {date:'2025-04-26 晚餐', summary:'糖醋里脊x2、蒜蓉西兰花x1', remark:'无', id:3}
      ];
      function renderHistoryList() {
        document.getElementById('history-list').innerHTML = historyMenus.map(item => `
          <div class="history-card">
            <div class="history-date"><i class="fa fa-calendar-alt mr-1"></i>${item.date}</div>
            <div class="history-summary">${item.summary}</div>
            <div class="history-remark"><i class="fa fa-sticky-note mr-1"></i>备注：${item.remark || '无'}</div>
          </div>
        `).join('');
      }
      function goBack() {
        window.history.back();
      }
      renderHistoryList();
    </script>
  </body>
</html>
